<template>
  <div class="madp-remind-page">
    <div class="search">
      <el-input v-model="searchValue" @blur="blurInputValue" prefix-icon="el-icon-search" :placeholder="pageType != 3 ? '请输入客户号/客户姓名/手机号' : '请输入客户姓名'"></el-input>
    </div>
    <div class="container">
      <mescroll-view class="scroll-view" :showMoreBtn="page.current * page.size < page.total" :total="page.total" @getMoreData="getMoreData">
        <el-select v-if="pageType == 3" v-model="selectLevel" placeholder="请选择" @change="changLevel">
          <el-option label="全部" value=""> </el-option>
          <el-option label="5万以下" value="1"> </el-option>
          <el-option label="5万-10万" value="2"> </el-option>
          <el-option label="10万-20万" value="3"> </el-option>
          <el-option label="20万以上" value="4"> </el-option>
        </el-select>
        <div class="reminds-list">
          <el-empty v-if="remindList.length < 1" :image="require('@/assets/img/no-todo.png')" description="暂无数据"></el-empty>
          <template v-else>
            <div class="reminds-item" v-for="(item, idx) in remindList" :key="idx">
              <div class="header">
                <img :src="item.avatar || $defaultAvatar" alt="" srcset="" />
                <div class="info">
                  <div class="top">
                    <span class="text-one-ellipsis">{{ item.custName }}（{{ item.custNo }}）</span>
                    <span>{{ item.dataDate }}</span>
                  </div>
                  <div class="manager text-one-ellipsis">管护人：{{ item.custMgrName }} | {{ item.belongOrgName }}</div>
                </div>
              </div>
              <div class="center-info">
                <!-- 产品到期提醒 -->
                <template v-if="pageType == 1">
                  <div class="info-item">
                    <span>产品类型</span>
                    <span class="blue text-one-ellipsis">{{ item.productType == 1 ? '个人理财' : '定开理财' }}</span>
                  </div>
                  <div class="info-item">
                    <span>产品名称</span>
                    <span class="text-one-ellipsis">{{ item.productName }}</span>
                  </div>
                  <div class="info-item">
                    <span>产品编号</span>
                    <span class="text-one-ellipsis">{{ item.productCode }}</span>
                  </div>
                  <div class="info-item">
                    <span>到期日期</span>
                    <span class="text-one-ellipsis">{{ item.expireDate }}</span>
                  </div>
                  <div class="info-item">
                    <span>账户金额</span>
                    <span class="text-one-ellipsis">{{ item.acctBal }}</span>
                  </div>
                </template>
                <!-- 生日提醒 -->
                <template v-if="pageType == 2">
                  <div class="info-item">
                    <span>生日日期</span>
                    <span class="blue text-one-ellipsis">{{ item.birthday }}</span>
                  </div>
                  <div class="info-item">
                    <span>客户AUM</span>
                    <span class="text-one-ellipsis">{{ item.text2 }}</span>
                  </div>
                </template>
                <!-- 活期余额提醒 -->
                <template v-if="pageType == 3">
                  <div class="info-item">
                    <span>客户等级</span>
                    <span class="blue text-one-ellipsis">{{ item.assetsLevel }}</span>
                  </div>
                  <div class="info-item">
                    <span>可用余额</span>
                    <span class="text-one-ellipsis">{{ item.availableBal }}</span>
                  </div>
                </template>
              </div>
              <div class="btns">
                <div class="btn" @click="telPhone(item.mobile)">
                  <img src="@/assets/img/managerView/phone.png" alt="" srcset="" />
                </div>
                <div class="btn" v-if="item.wxExternalUserid" @click="openChat(item.wxExternalUserid)">
                  <img src="@/assets/img/managerView/wechat.png" alt="" srcset="" />
                </div>
              </div>
            </div>
          </template>
        </div>
      </mescroll-view>
    </div>
    <back-btn />
  </div>
</template>
<script>
import MescrollView from '@/components/material/mescroll-view.vue'
import backBtn from '@/components/back-btn.vue'
import managerViewApi from '@/api/manager-view.js'
export default {
  components: { MescrollView, backBtn },
  data() {
    return {
      pageType: '',
      searchValue: '',
      selectLevel: '',
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      remindList: []
    }
  },
  created() {},
  mounted() {},
  activated() {
    let type = this.$route.query.type
    this.pageType = type
    if (type == 1) {
      document.title = '产品到期提醒'
    } else if (type == 2) {
      document.title = '生日提醒'
    } else if (type == 3) {
      document.title = '活期余额提醒'
    }
    this.searchValue = ''
    this.page.current = 1
    this.selectLevel = ''
    this.getRemindList()
  },
  methods: {
    getMoreData() {
      this.page.current++
      this.getRemindList()
    },
    // 输入框失去焦点
    blurInputValue() {
      this.page.current = 1
      this.getRemindList()
    },
    // 类型选择变化
    changLevel() {
      this.page.current = 1
      this.getRemindList()
    },
    // 获取提醒列表数据
    getRemindList() {
      if (this.pageType == 1) {
        this.getProductExpirePage()
      } else if (this.pageType == 2) {
        this.getBirthdayRemindPage()
      } else if (this.pageType == 3) {
        this.getCurrentBalancePage()
      }
    },
    // 打电话
    telPhone(phone) {
      if (this.$utils.isPcWeixin()) return
      let a = document.createElement('a')
      a.setAttribute('href', `tel:${phone}`)
      a.click()
    },
    // 打开聊天页面
    openChat(id) {
      if (!id) return
      this.$wxApi.openEnterpriseChat({
        externalUserIds: [id]
      })
    },
    // 获取产品到期列表
    getProductExpirePage() {
      managerViewApi
        .getProductExpirePage({
          wxUserId: this.$store.state.vuex_wxUserId,
          queryParam: this.searchValue,
          current: this.page.current,
          size: this.page.size
        })
        .then((res) => {
          if (this.page.current == 1) {
            this.remindList = res.data.data.records
          } else {
            this.remindList.push(...res.data.data.records)
          }
          this.page.total = res.data.data.total
        })
    },
    // 获取活期余额列表
    getCurrentBalancePage() {
      managerViewApi
        .getCurrentBalancePage({
          wxUserId: this.$store.state.vuex_wxUserId,
          custAum: this.selectLevel,
          custName: this.searchValue,
          current: this.page.current,
          size: this.page.size
        })
        .then((res) => {
          if (this.page.current == 1) {
            this.remindList = res.data.data.records
          } else {
            this.remindList.push(...res.data.data.records)
          }
          this.page.total = res.data.data.total
        })
    },
    // 获取生日提醒列表
    getBirthdayRemindPage() {
      managerViewApi
        .getBirthdayRemindPage({
          wxUserId: this.$store.state.vuex_wxUserId,
          queryParam: this.searchValue,
          current: this.page.current,
          size: this.page.size
        })
        .then((res) => {
          if (this.page.current == 1) {
            this.remindList = res.data.data.records
          } else {
            this.remindList.push(...res.data.data.records)
          }
          this.page.total = res.data.data.total
        })
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-remind-page {
  background: #fafafa;
  .search {
    padding: 8px 16px;
    background: #fff;
    /deep/.el-input {
      .el-input__inner {
        background: #f0f0f0;
        border: none;
        border-radius: 19px;
        height: 36px;
        padding-left: 41px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(44, 44, 44, 1);
      }
      .el-input__prefix {
        i {
          line-height: 36px;
        }
        left: 15px;
      }
    }
  }
  .container {
    padding: 0 16px;
    .scroll-view {
      height: calc(100vh - 52px);
    }
    .el-select {
      width: 110px;
      margin-top: 12px;
      /deep/.el-input__inner {
        height: 30px;
        line-height: 30px;
        border-radius: 13px;
        border: 1px solid rgba(44, 44, 44, 0.1);
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2c2c2c;
      }
      /deep/.el-input__icon {
        line-height: 1;
      }
    }
    .reminds-list {
      padding-top: 16px;
      .reminds-item {
        background: #ffffff;
        box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 10px;
        .header {
          display: flex;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 7px;
          }
          .info {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: space-between;
            .top {
              display: flex;
              justify-content: space-between;
              align-items: center;
              :nth-child(1) {
                flex: 1;
                width: 1px;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #202020;
              }
              :nth-child(2) {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(32, 32, 32, 0.4);
              }
            }
            .manager {
              width: 260px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(44, 44, 44, 0.5);
            }
          }
        }
        .center-info {
          background: #fafafa;
          border-radius: 8px;
          padding: 16px;
          margin-top: 15px;
          .info-item {
            display: flex;
            margin-bottom: 2px;
            :nth-child(1) {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(44, 44, 44, 0.5);
            }
            :nth-child(2) {
              flex: 1;
              margin-left: 16px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #2c2c2c;
            }
            .blue {
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #40a1fc;
            }
          }
          :last-child {
            margin-bottom: 0;
          }
        }
        .btns {
          margin-top: 10px;
          display: flex;
          justify-content: flex-end;
          .btn {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            border: 1px solid rgba(44, 44, 44, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 16px;
            img {
              width: 24px;
              height: 24px;
            }
          }
        }
      }
    }
  }
}
</style>